<template>
  <el-select v-model="model" :placeholder="placeholder" @change="change" v-bind="$attrs">
    <el-option
        v-for="{value, label} in options"
        :key="value"
        :label="label"
        :value="value">
    </el-option>
  </el-select>
</template>

<script>
/**
 * 基于数据字典的下拉选择框
 */
import {mapGetters} from 'vuex'

export default {
  name: "DictSelect",
  props: {
    value: {
      type: [String, Number, Boolean],
      default: ''
    },
    //字典类型
    dictKey: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: '全部'
    }
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters(['dictionary', 'dictionaryArr']),
    model:{
      get(){
        if(typeof this.value === 'boolean'){
          return Number(this.value) + ''
        }else{
          return this.value + ''
        }
      },
      set(value){
        let retVal = value;
        if(typeof this.value === 'boolean'){
          retVal = !!Number(value)
        }else if(typeof this.value === 'number'){
          retVal = Number(value)
        }
        this.$emit('input', retVal)
      }
    },
    options(){
      return this.dictionaryArr[this.dictKey]
    }
  },
  methods: {
    change(value){
      this.$emit('change', value)
    }
  }
}
</script>

<style scoped>

</style>
